<template>
	<view class="header-main">
		<view class="tab-bar">
			<view class="tab-bar-item" :class="tabIndex == idx ? 'is-active' : ''" v-for="(item, idx) in tabList" 
			 :key="idx" @click="onTabTap(idx)">
				<text class="text">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'headerMain',
		props: {
			index: {
				type: Number,
				default: 0
			},
			tabList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				tabIndex: this.index
			}
		},
		watch: {
			// 监听props中url变化，去修改对应的data中index
			index (val) {
				// 更换赋值
				this.tabIndex = val;
			}
		},
		methods: {
			onTabTap (index) {
				this.tabIndex = index;
				this.$emit('tabClick', index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-main{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		z-index: 999;
		background-color: #fff;
		.tab-bar {
			display: flex;
			
			&-item {
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				color: #7F7F7F;
				
				&.is-active {
					position: relative;
					height: 88rpx;
					line-height: 88rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #1A1A1A;
					.text{
						position: relative;
					}
				}
				&.is-active::after{
					content: '';
					display: block;
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					margin-left: -16rpx;
					width: 32rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: $color-common;
				}
			}
		}
	}
</style>
